import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Modal, Select } from 'antd';
import React, {useState} from 'react';
import { useRequest } from '@umijs/hooks';


import { queryCityInfo } from '../../../service.js';

const FormItem = Form.Item;

const CreateForm = props => {
  const { portModalVisible, form, onSubmit: handlePort, onCancel } = props;

  const { data: selectData } = useRequest(queryCityInfo,{loadingDelay: true}); //获取出发和到达航站
  const [site, handleSites] = useState('')

  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handlePort(fieldsValue);
    });
  };
  const formLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 15,
    },
  };

  return (
    <Modal
      destroyOnClose={true}
      title="新建站点"
      visible={portModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem {...formLayout} label="站点名称">
        {form.getFieldDecorator('site', {
          rules: [
            {
              required: true,
              message: '请输入站点名称！',
            },
          ],
        })(
          <Select
              style={{width: 200}}
              allowClear={true}
              showSearch
              placeholder="请选择"
              defaultActiveFirstOption={false}
              filterOption={true}
              optionFilterProp="children"
              notFoundContent={null}
              value={site}
              onChange={value => {
                handleSites(value)
              }}
            >
            {selectData && selectData.length > 0 && 
              selectData.map((v, i) => {
                return (
                  <Select.Option key={v.CITYNAME+ '-' +v.CITY3CODE}>{v.CITYNAME}-{v.CITY3CODE}</Select.Option>
                )
              })
            }
          </Select>
        )}
      </FormItem>
    </Modal>
  );
};

export default Form.create()(CreateForm);
